<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../demo.css">
	<script type="text/javascript" src="../../../../jquery.min.js"></script>
	<script type="text/javascript" src="../../../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../../../jquery.serializeObject.js"></script>

</head>
<body>
	<table id="dg"></table>
	<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:200px;padding:10px">
       
		 <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Pwd:',required:true">
            </div>

            <input type="text" name="_id" />

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>

    </div>


	<script type="text/javascript">
		 function submitForm(){
	            $('#ff').form('submit',{
	                onSubmit:function(){
	                	if($(this).form('enableValidation').form('validate')){

	                		var data = $("#ff").serializeObject();
	                		console.log(data._id && data._id.trim().length>0)
	                		if(data._id && data._id.trim().length>0){
	                			// editMode

	                			$.ajax({
		                			method:'put',
		                			url:'http://localhost:3000/users/data/' + data._id,
		                			data: data
		                		}).done(function(res){
		                			$('#dlg').dialog('close')
		                			$('#dg').datagrid('reload'); 
		                		})
	                		}else{
	                			// addMode
	                			delete data._id;
		                		$.ajax({
		                			method:'post',
		                			url:'http://localhost:3000/users/data',
		                			data: data
		                		}).done(function(res){
		                			$('#dlg').dialog('close')
		                			$('#dg').datagrid('reload'); 
		                		})

	                		}
	                		
	                	}else{
	                		$.messager.show({
				                title:'信息提示',
				                msg:'表单验证失败',
				                showType:'show'
				            });
	                	}

	                }
	            });
	        }
	        function clearForm(){
	            $('#ff').form('clear');
	        }


		 var toolbar = [{
            text:'Add',
            iconCls:'icon-add',
            handler:function(){
            	$('#dlg').dialog('open')
            }
        },{
            text:'删除',
            iconCls:'icon-cut',
            handler:function(){


            	var gss = $("#dg").datagrid('getSelections');
            	var ids = [];
            	for(var i=0;i<gss.length;i++){
            		ids.push(gss[i]._id);
            	}


            	$.ajax({
            		url:'http://localhost:3000/users/deletes',
            		method:'post',
            		data: {ids: ids.toString()}
            	}).done(function(res){
            		console.log(res.status)
            		if(res.status === 200){
            			$.messager.show({
				                title:'信息提示',
				                msg:'删除数据成功',
				                showType:'show'
				            });
            		}else{
            			$.messager.show({
				                title:'信息提示',
				                msg:'请选择要删除的数据',
				                showType:'show'
				            });
            		}
            		$("#dg").datagrid("reload");
            	})

            }
        },'-',{
            text:'Save',
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }];

		$('#dg').datagrid({
			toolbar:toolbar,
			pagination:true,
			fit:true,
			method:'post',
		    url:'http://localhost:3000/users/list',
		    columns:[[
		   		{field:'ck',checkbox:true},
		        {field:'_id',title:'ID',width:100},
		        {field:'name',title:'名称',width:100},
		        {field:'opt',title:'操作', width:80,
					formatter: function(value,row,index){
						return "<a onclick='Edit("+index+")'>Edit</a> <a href='javascript:void(0)' onclick='Comments("+index+")'>delete</a>"
					}
				}
		    ]],
		    onDblClickRow(index,row){
		    	editData(row);
		    }
		});


		function Edit(index){
			var rows = $("#dg").datagrid('getRows');
			console.log(rows)
		}

		function editData(row){
			$('#ff').form('load',row);
			$('#dlg').dialog('open');
		}

		function Comments(index){
			var rows = $("#dg").datagrid('getRows');
			var currentData = rows[index];
			var href= "layout-2.html?id=" + currentData._id;
			addTab('comment',href,'icon-tip',true);
		}


		function addTab(title, href, iconCls, iframe){
			var tabPanel = parent.$('#wu-tabs');
			if(!tabPanel.tabs('exists',title)){
				var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
				// iframe模式
				if(iframe){
					tabPanel.tabs('add',{
						title:title,
						content:content,
						iconCls:iconCls,
						fit:true,
						cls:'pd3',
						closable:true
					});
				}
				else{
					tabPanel.tabs('add',{
						title:title,
						href:href,
						iconCls:iconCls,
						fit:true,
						cls:'pd3',
						closable:true
					});
				}
			}
			else
			{
				tabPanel.tabs('select',title);
			}
		}

	</script>
	
</body>
</html>
